<template>
	<div class="register_content">
		<div class="register_top">
			<p>
				<span>第 <b class="color_red">{{arriveNper}}</b>期 </span>
				<span>距开奖 <b class="color_red">{{lotterytime}}</b></span>
			</p>
		</div>
		<!--content start-->
		<table border="0" cellspacing="0" cellpadding="0" class="hz_table">
			<tr>
				<th></th>
				<th>万</th>
				<th>千</th>
				<th>百</th>
				<th>十</th>
				<th>个</th>
				<th>合</th>
			</tr>
			<tr v-for="(val,item,index) in data" :key="index">
				<td>{{item}}</td>
				<td>
					<b>{{val.ten_thousands}}</b>
				</td>
				<td>
					<b>{{val.thousands}}</b>
				</td>
				<td>
					<b>{{val.hundreds}}</b>
				</td>
				<td>
					<b>{{val.tens}}</b>
				</td>
				<td>
					<b>{{val.units}}</b>
				</td>
				<td>
					<b>{{val.sum}}</b>
				</td>
			</tr>
		</table>
		<!--content end-->
		<!--foot start-->
		<div class="hint_box">
			提示：统计为近30期的数据
		</div>
		<!--foot end-->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				qishunumber: [], //最新一期
				data: "",
				//倒计时
				lotterytime: '',
			}
		},
		created() {
			this.kaijiang()
			this.tongji()
		},
		computed: {
			arriveNper() {
				let nper = parseInt(this.qishunumber);
				if(!nper) {
					return 0
				}
				return nper + 1
			},
		},
		methods: {
			//顶部最新一期开奖开奖
			kaijiang() {
				this.http
					.get("/api/new/nper")
					.then(res => {
						console.log(res)
						if(res.status_code == 200) {
							this.qishunumber = res.data.nper;//开奖期数
							this.time = res.data.created_at; //开奖时间
							this.shijiantime()
						} else {
							this.$toasted.error(res.message).goAway(1000);
						}
					});
			},
			//统计频次
			tongji() {
				this.http
					.get("/api/frequency/data")
					.then(res => {
						console.log(res)
						this.data = res;
					});
			},
			//倒计时
			shijiantime() {
				var newdata = new Date(); //现在时间
				var time1 = newdata.getTime(); //转化时间戳
				console.log(time1);

				var time2 = new Date(this.time.replace(/\-/g, "/")).getTime()//上 期 开奖转化时间戳
				console.log(time2);
				
				//测试
				/*var time3 = new Date('2019-09-19 16:18:00').getTime() //上 期开奖转化时间戳
				console.log(time3);*/

				this.countDownList = 600000 - (newdata - time2) //剩余时间
				console.log(this.countDownList)

				var seconds = parseInt(this.countDownList) //获取秒
				//倒计时
				var  timer  =  setInterval(()  =>  {            
					seconds = seconds - 1000;
					
					if(seconds<= 0)  {     
						// 请求数据
						this.kaijiang();
						this.tongji()
//						console.log('小于0')
						// 清楚定时器
						clearInterval(timer)  
					}            
					var  m  =  parseInt((seconds  %  (1000  *  60  *  60))  /  (1000  *  60));
					var  s  =  Math.floor((seconds  %  (1000  *  60))  /  1000); 
					if(s<=0){
						s=0
					};
					if (m<10) {
						m="0"+m
					}
					if (s<10) {
						s="0"+s
					}
//					console.log('设置显示时间')
					let  timeRamin  =  m  +  ':'  +  s  // timeRamin 是显示在页面上的时分  
					this.lotterytime = timeRamin //
//					console.log('设置显示时间')
					console.log(timeRamin)          
				},  1000)

			}　
		}

	}
</script>

<style scoped>
	.hz_table td b {
		display: inline-block;
		width: 0.6rem;
		height: 0.6rem;
	}
</style>